<template>
  <div>
    <nav class="navbar">
      <img src="../assets/icon.jpg" alt="Logo" class="navbar-logo" />
      <ul class="navbar-links" :class="{ 'hidden': !showLinks }">
        <li v-for="(link, index) in links" :key="index">
          <router-link :to="link.path" class="navbar-link">
            {{ link.name }}
          </router-link>
        </li>
      </ul>
      <div class="navbar-search">
        <input v-model="searchQuery" type="text" placeholder="搜索" @keyup.enter="search" class="navbar-search-input" />
        <button @click="search" class="navbar-search-button">搜索</button>
      </div>
      <button @click="toggleLinks" class="navbar-toggle" v-if="isSmallScreen">☰</button>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'NavbarComponent',
  data() {
    return {
      searchQuery: '',
      showLinks: true,
      isSmallScreen: window.innerWidth <= 768,
      links: [
        { name: '首页', path: '/' },
        { name: '分类知识', path: '/classify' },
        { name: '回收点', path: '/RecyclingPoints' },
        { name: '政策法规', path: '/Policies_Regulations' },
        { name: '行业动态', path: '/IndustryDynamics' },
        { name: '登录', path: '/UserLogin' },
        { name: '注册', path: '/UserRegister' }
      ]
    };
  },
  mounted() {
    document.title = '垃圾回收';
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    search() {
      // Search logic here
    },
    toggleLinks() {
      this.showLinks = !this.showLinks;
    },
    handleResize() {
      this.isSmallScreen = window.innerWidth <= 768;
      if (!this.isSmallScreen) {
        this.showLinks = true;
      }
    }
  }
};
</script>

<style scoped>
@import '../styles/Navboar.css';
</style>